<template>
  <div class="about">
    <main class="animated bounceInRight">
      <div class="cent">我的账号</div>
      <img src="../../public/image/testimonial-bg.jpg" alt="玫瑰" width="100%" height="290px" class="lbt" />
    </main>
    <div class="container animated bounceInLeft">
      <div class="box">
        <div class="left">
          <ul>
            <li v-for="(item, index) in content" :key="index" :class="{ active: isactive == index }"
              @click="handle(index)">
              <a>
                <i :class="`iconfont ${item.icon}`"></i>
                {{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="account-1" v-show="isshow == 0">
            <h1>仪表板</h1>
            <p class="fl-14p">您好，{{user}}（如果不是！ 请退出 ）</p>
            <p class="fl-16p">
              从您的帐户仪表板。您可以轻松地查看并查看您最近的订单，管理您的送货和帐单地址以及修改密码和帐户详细信息。
            </p>
          </div>
          <div class="account-2" v-show="isshow == 1">
            <h1>订单</h1>
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td>名称</td>
                <td>日期</td>
                <td>状态</td>
                <td>总价</td>
              </tr>
              <tr v-for="(item, index) of orders" :key="index">
                <td class="name">{{ item.name }}</td>
                <td class="date">{{ item.data }}</td>
                <td class="status">支付成功</td>
                <td class="total">{{"￥" + item.price }}</td>
              </tr>
            </table>
          </div>
          <div class="account-3" v-show="isshow == 2">
            <h1>下载</h1>
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td>产品</td>
                <td>日期</td>
                <td>到期</td>
                <td>下载</td>
              </tr>
              <tr v-for="(item, index) of download" :key="index">
                <td class="product">{{ item.product }}</td>
                <td class="date2">{{ item.data }}</td>
                <td class="expire">{{ item.expire }}</td>
                <td class="download">{{ item.download }}</td>
              </tr>
            </table>
          </div>
          <div class="account-4" v-show="isshow == 3">
            <h1>付款方法</h1>
            <p class="pai">您还无法保存付款方式</p>
          </div>
          <div class="account-5" v-show="isshow == 4">
            <div class="account-left">
              <h1>账单地址</h1>
              <p><input class="fl-addres" placeholder="例如:雷钦" v-model="adName"></p>
              <p><input type="text" class="fl-ma" placeholder=" 北京海淀 1355 翻斗大街 900 
                番偶区42街12号" v-model="adAress"></p>
              <p> <input class="fl-phone" type="text" placeholder="Mobile: (+86)15579628187" v-model="adPhone"></p>
              <button class="fl-btn" style="width:150px" @click="addAddress(adName,adAress,adPhone)">
                <i class="iconfont icon-bianjibi"></i>添加地址
              </button>
            </div>
            <div class="account-right">
              <h1>账单地址</h1>
              <div v-for="(item,index) in address" :key="index">
                <p class="fl-addres">{{item.name}}</p>
                <p class="fl-ma">
                  {{item.address}}
                </p>
                <p class="fl-phone">{{item.phone}}</p>
                <button class="fl-btn" style="width:150px">
                  <i class="iconfont icon-bianjibi"></i>设为默认
                </button>
              </div>
            </div>
          </div>
          <div class="account-6" v-show="isshow == 5">
            <div class="top">
              <h1 class="fl-a6">Account Details</h1>
              <input type="text" placeholder="姓" />
              <input type="text" placeholder="名" />
              <input type="text" placeholder="片假名" />
              <input type="text" placeholder="Email地址" />
            </div>
            <div class="footer">
              <h1>Password change</h1>
              <input type="text" placeholder="保存的密码" />
              <input type="text" placeholder="新密码" />
              <input type="text" placeholder="在输入密码" />
              <button>save change</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  ul,
  li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  button,
  input {
    border: none;
    outline: none;
    background: none;
  }

  main {
    position: relative;

    .cent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #222222;
      font-size: 42px;
      font-family: "Lora", serif;
      z-index: 30;
    }
  }

  .container {
    height: 523px;
    padding: 90px 0 0 100px;

    .box {
      width: 1200px;
      padding: 0 12px;
      margin: 0 auto;
      display: flex;

      .left {
        width: 330px;
        height: 331px;
        padding: 0 12px;
        font-size: 16px;

        ul {
          background-color: #f7f7f7;

          li {
            width: 100%;
            height: 43px;
            display: flex;

            .white {
              color: #fff;
            }

            i {
              margin-right: 5px;
            }

            a {
              width: 100%;
              padding: 10px 30px;
              font-size: 14px;
              margin-top: -1px;

              &:hover {
                background-color: #f34f3f;
                color: #ffffff;
              }
            }
          }

          .active {
            background-color: #f34f3f;
            color: #ffffff !important;
          }
        }
      }

      .right {
        width: 800px;
        height: 331px;
        padding: 0 12px;

        h1 {
          font-size: 24px;
          font-weight: 500;
          color: #000000;
          font-family: "Rubik", sans-serif;
          margin-bottom: 8px;
        }

        .pai {
          margin-top: 30px;
          background-color: #f8f8f8;
          border-top: 3px solid #E72463;
          border-radius: 5px 5px 0 0;
          font-weight: 600;
          font-size: 15px;
          color: #666666;
          padding: 20px;
        }

        .account-5 {
          display: flex;

          h1 {
            font-weight: 700;
          }

          .fl-addres {
            margin-top: 20px;
            font-weight: 600;
            color: #000000;
          }

          .fl-ma {
            font-size: 14px;
            margin-top: 20px;
          }

          .fl-phone {
            width: 100%;
            font-size: 14px;
            margin-top: 20px;
          }

          button {
            padding: 10px 15px;
            font-size: 14px;
            background-color: #f34f3f;
            color: white;
            margin-top: 40px;
          }

          .account-left {
            width: 50%;
            padding: 0 12px;
          }

          .account-right {
            width: 50%;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            overflow: auto;
          }
        }

        .fl-14p {
          font-size: 14px;
          color: #666666;
          margin-top: 10px;
        }

        .fl-16p {
          font-size: 16px;
          margin-top: 25px;
          color: #666666;
        }

        table {
          text-align: center;

          td {
            height: 46px;
            font-size: 14px;
            color: #000000;
            font-weight: 400;
            vertical-align: middle;
            border: 1px solid #ECECEC;
          }

          .name {
            width: 204px;
          }

          .date {
            width: 190px;
          }

          .status {
            width: 108px;
          }

          .total {
            width: 91px;
          }

          .action {
            width: 108px;
          }

          .product {
            width: 233px;
          }

          .date2 {
            width: 218px;
          }

          .expire {
            width: 120px;
          }

          .download {
            width: 204px;
          }
        }

        .top {
          .fl-a6 {
            font-size: 24px;
            margin: 0 0 8px;
            color: #000000;
          }

          input {
            width: 50%;
            padding: 8xp;
          }
        }
      }
    }
  }
</style>


<script>
  var table1 = {
    template: `<h3>table1组件</h3>`,
  };
  var table2 = {
    template: `<h3>table2组件</h3>`,
  };
  export default {
    data() {
      return {
        isactive: 0,
        iswhite: 0,
        isshow: 0,
        user: '',
        adName: null,
        adAress: null,
        adPhone: null,
        content: [{
            name: "仪表盘",
            icon: "tachometer icon-33yibiaopanfa-tachometer-01"
          },
          {
            name: "订购",
            icon: "icon-chat-gray"
          },
          {
            name: "下载",
            icon: "icon-xiazai"
          },
          {
            name: "付款方式",
            icon: "icon-xinlingshouyewuicon-"
          },
          {
            name: "地址",
            icon: "icon-address"
          },
          {
            name: "账户详细资料",
            icon: "icon-10"
          },
          {
            name: "登录退出",
            icon: "icon-dengchux"
          },
        ],
        address: [],
        orders: [],
        download: [],
      };
    },
    methods: {
      handle(number) {
        this.isshow = number;
        this.isactive = number;
        if (number == 6) {
          localStorage.removeItem("user");
        }
      },

      addAddress(name, address, phone) { // 添加地址
        if (this.adAress != null && this.adPhone != null && this.adName != null) {
          var obj = {
            "name": name,
            "address": address,
            "phone": phone
          };
          this.address.push(obj);
          var user = localStorage.getItem("user") // 本地存储
          localStorage.setItem(user + "address", JSON.stringify(this.address))
          this.adAress = null,
            this.adPhone = null,
            this.adName = null
/* 
          this.$axios.post('http://121.196.102.99:3000/account', 'username=' + String(localStorage.getItem("user")) +
            '&address=' + String( // 连接服务器 储存添加的地址
              JSON.stringify(obj))).
          then((data) => {
            // console.log(data);
          }); */
        }
      }
    },

    mounted() {
      var user = localStorage.getItem("user");
      this.address = JSON.parse(localStorage.getItem(user+"address"));
      this.orders = JSON.parse(localStorage.getItem(user+"finish"));
      this.$axios.get('http://121.196.102.99:3000/account').then((res) => { //发送请求的url
        this.download = res.data.download;
      }) //响应回来触发的回调函数
    },
  };
</script>